import React,{useEffect,useState} from 'react';
import { connect } from 'umi';
import { faArrowLeft, faArrowRight, faHome, faRedo, faEllipsisV } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './AddressBar.css';


const AddressBar = ({url,openUrl}) => {
    console.log('AddressBar',url);
    const [value,setValue] = useState(url);
    
    useEffect(()=>{
        setValue(url);
    },[url])

    const onKeyDown = (e)=>{
        if (e.keyCode == 13) {
            openUrl(value);
        }
    }
    return (
        <div>
            <input className="address-bar-input form-control input-sm " type="text" 
                value={value}
                onChange={e=>setValue(e.target.value)}
                onKeyDown={onKeyDown}
            ></input>
            {/* <input type="text" className="input-sm" aria-describedby="basic-addon1" /> */}
        </div>
    )
}

const mapStateToProps = ({ addressBar }) => {
    return {
        url:addressBar.url
    }
}
const mapDispatchToProps ={
    openUrl: (url)=>{
        console.log('openUrl',url);
        return {
            type:'addressBar/openUrl',
            payload:{
                url
            }
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(AddressBar);